<template>
  <div class="context_menu_item">
    <el-icon v-if="icon">
      <component :is="icon" />
    </el-icon>
    <slot></slot>
  </div>
</template>

<script setup lang="ts">
import type { Component } from "vue";
interface Props {
  icon?: string | Component;
}
defineOptions({
  name: "ContextMenuItem"
});
defineProps<Props>();
</script>

<style scoped lang="scss">
.context_menu_item {
  clear: both;
  margin: 0;
  padding: 5px 16px;
  color: var(--el-menu-active-color);
  font-weight: normal;
  line-height: 22px;
  font-size: var(--el-font-size-base);
  cursor: pointer;
  transition: all 0.3s;
  i {
    margin-right: 5px;
    vertical-align: middle;
  }
}
.context_menu_item:hover {
  color: var(--el-menu-active-color) !important;
  background-color: var(--el-color-primary-light-8) !important;
}
</style>
